<template>
  <div>
    <div class="TopSelect">
      <!-- 切换城市 -->
      <!-- <el-input placeholder="切换城市" class="top_input_width" v-model="cityValue"></el-input> -->

      <el-autocomplete
        class="inline-input top_input_width"
        v-model="cityValue"
        :fetch-suggestions="querySearchCity"
        placeholder="切换城市"
        @select="handleSelectCity"
        @blur="handBlurCity"
        :select-when-unmatched="true"
        :highlight-first-item="true"
        :trigger-on-focus="false"
      ></el-autocomplete>

      <!-- 时间 -->
      <el-date-picker
        @change="timeChange"
        class="top_input_time_width"
        v-model="timeValue"
        type="daterange"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      ></el-date-picker>

      <!-- 人数框 -->
      <div class="peopleNum">
        <div>
          <el-popover placement="bottom" v-model="visible">
            <!-- 1 -->
            <el-input
              placeholder="人数未定"
              suffix-icon="el-icon-user"
              class="top_input_width"
              slot="reference"
            ></el-input>
            <!-- 点击后显示 -->
            <div class="people_num_select">
              <div class="people_num_select_top">
                <div class="peole_num_title">每间</div>

                <el-select v-model="valueAdult" placeholder="请选择">
                  <el-option
                    v-for="item in peopleAdult "
                    :key="item.value"
                    :value="item.value"
                    :label="item.label+' 成人'"
                  ></el-option>
                </el-select>

                <el-select v-model="valueChild" placeholder="请选择">
                  <el-option
                    v-for="item in peopleChild "
                    :key="item.value"
                    :value="item.value"
                    :label="item.label+' 儿童'"
                  ></el-option>
                </el-select>
              </div>
              <div class="people_num_select_bottom">
                <el-button type="primary" class="people_num_submit" @click="peopleClick">确定</el-button>
              </div>
            </div>
          </el-popover>
        </div>
        <el-button type="primary" @click="seePriceClick">查看价格</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["cityMapDataName"],
  data() {
    return {
      // 城市
      cityValue: "",
      cityObj: {},
      // 城市选择框是否点击
      handleClickBd: true,
      // 时间选择
      timeValue: [],
      // 确认时间
      timeData: {},
      // 人数选择
      valueAdult: "",
      valueChild: "",
      // slector 是否显示
      visible: false,
      peopleAdult: [
        {
          value: "选项1",
          label: "1"
        },
        {
          value: "选项2",
          label: "2"
        },
        {
          value: "选项3",
          label: "3"
        },
        {
          value: "选项4",
          label: "4"
        },
        {
          value: "选项5",
          label: "5"
        }
      ],

      peopleChild: [
        {
          value: "选项1",
          label: "1"
        },
        {
          value: "选项2",
          label: "2"
        },
        {
          value: "选项3",
          label: "3"
        },
        {
          value: "选项4",
          label: "4"
        },
        {
          value: "选项5",
          label: "5"
        }
      ]
    };
  },
  methods: {
    getCity(name) {
      return this.$axios({
        method: "get",
        url: "/cities",
        params: {
          name
        }
      }).then(res => {
        const { data } = res.data;
        // console.log('data: ', data);
        data.forEach(item => {
          item.value = item.name;
        });
        return data;
        // 调用失去焦点函数
        this.handBlurCity();
      });
    },
    // 搜索框  带输入建议 显示
    async querySearchCity(queryString, cb) {
      if (queryString == "") {
        return;
      }
      const data = await this.getCity(queryString);
      // 调用 callback 返回建议列表的数据
      cb(data);
    },
    // 城市选中
    handleSelectCity(item) {
      console.log("item: ", item);
      // console.log("点击确定");
      //  console.log('item: ', item);
      this.cityObj = item;
      // console.log("cityObj选择: ", this.cityObj);
      this.handleClickBd = true;
      this.$emit("TopFilter", this.cityObj);
    },
    // 城市失去焦点
    async handBlurCity(item) {
      await setTimeout(() => {}, 200);
      if (this.handleClickBd) {
        this.handleClickBd = false;
        return;
      }
      const data = await this.getCity(this.cityValue);
      this.cityObj = data[0];
      // console.log("cityObj失去焦点: ", this.cityObj);
      this.cityValue = data[0].name;
      this.$emit("TopFilter", this.cityObj);
    },
    // 时间点击
    timeChange() {
      this.timeData.enterTime = this.$moment(this.timeValue[0]).format(
        "YYYY-MM-DD"
      );
      // console.log("this.timeData.enterTime: ", this.timeData.enterTime);
      this.timeData.leftTime = this.$moment(this.timeValue[1]).format(
        "YYYY-MM-DD"
      );
      // console.log("this.timeData.leftTime: ", this.timeData.leftTime);
    },
    // 人数确定
    peopleClick() {
      // 关闭选项框
      this.visible = false;
    },
    // 发送数据出去
    emitHotelData() {
      // 在最终查看价格点击时被调用
      const obj = {};
      // 入店时间  // 离店时间
      if (this.timeData.enterTime && this.timeData.leftTime) {
        obj.timeData = this.timeData.enterTime;
        obj.leftTime = this.timeData.leftTime;
      }
      // 人数 后台暂未开发
      // console.log("obj: ", obj);
      // 把对象变成路径
      let str = "";
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          const element = obj[key];
          str += key + "=" + element + "&";
        }
      }
      // console.log(str);
      this.$emit("TopFilter", this.cityObj, str);
    },
    // 查看价格点击
    seePriceClick() {
      this.emitHotelData();
    }
  },
  watch: {
    cityMapDataName() {
      // console.log('this.cityMapDataName: ', this.cityMapDataName);
      this.getCity(this.cityMapDataName).then(res => {
        this.$emit("TopFilter", res[0]);
      });
    }
  }
};
</script>

<style lang="less" scoped>
//  查询上部分
.TopSelect {
  width: 900px;
  margin: 20px 0;
  display: flex;
  justify-content: space-around;
  /deep/ .el-input {
    width: auto;
  }
  //  左右宽度统一的input
  .top_input_width {
    /deep/ .el-input__inner {
      width: 200px;
    }
  }
  // 时间选择器宽度
  .top_input_time_width {
    width: 350px;
  }
  //  人数选择
  .peopleNum {
    width: 310px;
    display: flex;
    justify-content: space-between;
    position: relative;
  }
}
</style>
<style lang="less">
// 人数选择器
.el-popover {
  .people_num_select {
    width: 300px;
    .people_num_select_top {
      width: 300px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #dddddd;
      padding-bottom: 15px;
      .peole_num_title {
        width: 100px;
      }
      // 点击的input
      .el-input {
        width: 92px;
        height: 28px;
        line-height: 28px;
        box-sizing: border-box;
        // 点击input出现选择的那个input
        .el-input__inner {
          height: 28px;
          line-height: 28px;
        }
        .el-input__suffix {
          display: flex;
          align-items: center;
        }
      }
    }
    .people_num_select_bottom {
      position: relative;
      height: 60px;
      .el-button {
        width: 56px;
        height: 28px;
        padding: 0;
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }
}
</style>